<template>
  <div>
    <ul class="list">
      <div :style="bgWhitestyle"></div>
      <li v-for="(item,index) in result" :key="index" @click="toggle(index)" :class="{bgGray:index!=liIndex,bgWhite:index==liIndex,lihover:lihover}" :style="{width:liLength+'px'}" @mouseover="mouseover" @mouseout="mouseout">
        <img :src="item.logo">
      </li>
    </ul>
    <div class="content-warp">
      <div class="content2 ">
        <p class="commonP"><span id="commonSpan" class="resource"></span>资源介绍</p>
        <ul>
          <li v-for="(item,index) in arr" :key="index" :class="{hengxiang:arr.length>3,shuxiang:arr.length<=3}">
            <p class="commonP1"><img src="../../assets/img/APP矩阵详情页/切图通用/13.png">
              <span>{{item}}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="content2 content-style">
        <p class="commonP"><span id="commonSpan" class="advantage"></span>产品优势</p>
        <ul>
          <li v-for="(item,index) in arr1" :key="index" :class="{shuxiang:arr1.length!==0}">
            <p class="commonP1"><img src="../../assets/img/APP矩阵详情页/切图通用/13.png">
              <span>{{item}}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="content2 content2-p">
        <p class="commonP"><span id="commonSpan" class="show-presentation"></span>展现形式</p>
        <ul class="content3">
          <li v-for="(item,index) in arr2" :key="index">
            <img :src="item" alt="">
            <p>{{arr3[index]}}</p>
          </li>
        </ul>
      </div>
      <div class="container4">
        <p class="commonP"><span id="commonSpan" class="sale-presentation"></span>售卖方式</p>
        <p><img src="../../assets/img/APP矩阵详情页/切图通用/13.png">
          <span>{{result1.sellingWay}}</span>
        </p>
      </div>
      <div class="container5">
            <button @click="$router.push({path:'/view2/hotMediaNav2',query:{type:'app'}})">点击查看更多APP</button>
      </div>
    </div>
  </div>
</template>
<script>
const img1 = require('../../assets/img/APP矩阵详情页/切图通用/3.png')
const img2 = require('../../assets/img/APP矩阵详情页/切图通用/4.png')
const img3 = require('../../assets/img/APP矩阵详情页/切图通用/5.png')
const img4 = require('../../assets/img/APP矩阵详情页/切图通用/6.png')
const img5 = require('../../assets/img/APP矩阵详情页/切图通用/7.png')
const img6 = require('../../assets/img/APP矩阵详情页/切图通用/8.png')
export default {
  name: 'pingpai',
  data() {
    return {
      liIndex: 0,
      type: '',
      result1: '',
      id: '',
      arr: [],
      result: '',
      arr1: [],
      arr2: [],
      arr3: [],
      liLength: '',
      bgWhitestyle: {
        boxShadow: '2px 2px 20px #ebebeb',
        position: 'absolute',
        marginTop: '-15px',
        width: '200px',
        height: '180px',
        left:'200',
        border:'15px solid #fff',
        zIndex:1
      },
      lihover : false
    }
  },
  created(){
  },
  methods: {
    toggle(index) {
      //  this.bgWhitestyle.left=(document.body.clientWidth-1200)/2+200*index+'px';
      this.bgWhitestyle.left=(document.body.clientWidth-1200)/2+this.liLength*index+'px';
      this.liIndex = index
      // this.id = this.result[index].id
      this.bgWhitestyle.left =
        (document.body.clientWidth - 1200) / 2 +
        this.liLength * this.liIndex +
        "px";
      this.id = this.result[index].id;
      this.$ajax
        .post(
          this.Ipurl + 'advertisingInformation/queryById' + '?id=' + this.id
        )
        .then(res => {
          this.result1 = res.data.dataInfo
          // 拆分得到的字符串结果
          this.arr = this.result1.introduce.split('&')
          this.arr1 = this.result1.advantage.split('&')
          this.arr2 = this.result1.showImage.split(';')
          this.arr3 = this.result1.showContent.split(';')
        })
    },
    mouseover(){
      this.lihover = true;
    },
    mouseout(){
      this.lihover = false;
    }
  },
  mounted() {
    //   从路由进入
    if (this.$route.query.type) {
      //   this.type = this.$route.query.type;
      this.type = 'APP品牌类'
      // 获取logo
      this.$ajax
        .post(
          this.Ipurl +
            'advertisingInformation/getNamesByType' +
            '?type=' +
            this.type
        )
        .then(res => {
          // 默认读取第一个
          this.result = res.data.dataInfo
          this.liLength = 1200 / this.result.length
          this.bgWhitestyle.width = this.liLength + 'px';
          //   this.id = this.result[0].id;
          this.id = this.$route.query.id
          for (let i = 0; i < this.result.length; i++) {
            if (this.result[i].id == this.id) {
              {
                this.liIndex = i
                this.bgWhitestyle.width = this.liLength + "px";
                this.bgWhitestyle.left =
                  (document.body.clientWidth - 1200) / 2 +
                  this.liLength * this.liIndex +
                  "px";
              }
            }
          }
          this.$ajax
            .post(
              this.Ipurl + 'advertisingInformation/queryById' + '?id=' + this.id
            )
            .then(res => {
              this.result1 = res.data.dataInfo
              // 拆分得到的字符串结果
              this.arr = this.result1.introduce.split('&')
              this.arr1 = this.result1.advantage.split('&')
              this.arr2 = this.result1.showImage.split(';')
              this.arr3 = this.result1.showContent.split(';')
            })
        })
    } else {
      // 默认读取第一个logoid
      this.type = 'APP品牌类'
      //   默认读取type为品牌类
      this.$ajax
        .post(
          this.Ipurl +
            'advertisingInformation/getNamesByType' +
            '?type=' +
            this.type
        )
        .then(res => {
          // 默认读取第一个
          this.result = res.data.dataInfo
          // 判断有取出来有多少个li
          this.liLength = 1200 / this.result.length;
          this.bgWhitestyle.width = this.liLength + 'px';
          // console.log(this.liLength)
          this.id = this.result[0].id
          this.$ajax
            .post(
              this.Ipurl + 'advertisingInformation/queryById' + '?id=' + this.id
            )
            .then(res => {
              this.result1 = res.data.dataInfo
              // 拆分得到的字符串结果
              this.arr = this.result1.introduce.split('&')
              this.arr1 = this.result1.advantage.split('&')
              this.arr2 = this.result1.showImage.split(';')
              this.arr3 = this.result1.showContent.split(';')
            })
        })
    }
  }
}
</script>

<style scoped>
.list {
  overflow: hidden;
}
.list > li {
  float: left;
  height: 150px;
  text-align: center;
  line-height: 150px;
  cursor: pointer;
  /* position:absolute; */
}
.bgGray {
  background: #f8f9fd;
}
.bgWhite {
  background: #fff;
}

/* .bgWhite-style{
 -moz-box-shadow: 2px 2px 17px #d4d4d4;
  -webkit-box-shadow: 2px 2px 17px #d4d4d4;
  box-shadow: 2px 2px 17px #d4d4d4;
  position:absolute;
  margin-top:-15px;
  width:180px;
  height:180px;
} */
.commonP {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
  margin-left: 60px;
}
.shuxiang {
  width: 100%;
  margin-top: 40px;
}
.hengxiang {
  width: 50%;
  width: 100%;
  margin-top: 40px;
  float: left;
}
.commonP1 {
  margin-left: 60px;
  font-size: 18px;
}
.content3 {
  margin-top: 40px;
  overflow: hidden;
}
.content3 li {
  width: 390px;
  text-align: center;
  float: left;
}
.content3 li p {
  font-size: 16px;
  margin-top: 20px;
  font-weight: bold;
  margin-bottom: 40px;
}
.container4 {
  background: #f8f9fd;
  margin-top: 30px;
  overflow: hidden;
}
.container4 p {
  font-size: 24px;
  font-weight: bold;
  margin-top: 40px;
  margin-left: 60px;
  margin-bottom: 40px;
}
.container4 p:nth-child(2) {
  font-size: 18px;
  font-weight: normal;
}
.container4 p:nth-child(2) span {
  margin-left: 10px;
}
.content-warp{
  position: relative;
  padding:7px;
}
.content2 {
  background: #fff;
  margin-top: 30px;
  overflow: hidden;
  box-shadow:2px 2px 20px #EBEBEB;
}
.content2-p{
  width:100%;
}
.content-style{
  background:#f8f9fd;
   box-shadow:none;
   margin-top:30px;
}
.content2 li:last-child {
  margin-bottom: 40px;
}
.content2 li p span {
  margin-left: 10px;
}
.container5 {
  margin-top: 60px;
  text-align: center;
  margin-bottom: 80px;
}
.container5 > button {
  width: 180px;
  height: 40px;
  border-radius: 25px;
  background: rgb(237, 64, 64);
  color: #fff;
  box-shadow: 0px 4px 19px #ed9191;

}

#commonSpan {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding-right: 35px;
  margin-left: 0;
}

.resource {
  background: url('../../assets/img/APP矩阵详情页/切图通用/64.png') no-repeat;
  vertical-align: -13%;
}
.advantage {
  background: url('../../assets/img/APP矩阵详情页/切图通用/65.png') no-repeat;
  vertical-align: -13%;
}
.show-presentation {
  background: url('../../assets/img/APP矩阵详情页/切图通用/66.png') no-repeat;
  vertical-align: -11%;
}
.sale-presentation {
  background: url('../../assets/img/APP矩阵详情页/切图通用/67.png') no-repeat;
  vertical-align: -5%;
}

.lihover:hover {
  background-color: #fff;
  opacity: 0.5;
}
</style>


